<template>
  <view class="containerBox" @click="$emit('click')">
    <view class="box-left"><hotRanking :ranking="ranking"></hotRanking></view>
    <view class="box-right">
      <!-- 标题 -->
      <view class="item-tile line-clamp-2">{{ data.title }}</view>
      <!-- 简介 -->
      <view class="item-desc line-clamp-2">{{ data.desc }}</view>
      <view class="item-bottom">
        <!-- 作者 -->
        <text class="author">{{ data.nickname }}</text>
        <!-- 热度 -->
        <view class="hot-desc">
          <image
            src="@/static/images/hot-icon.png"
            mode="aspectFit"
          />
          <text> {{ $filters.hotNumber(data.views)}} 热度</text>
          <!-- {{ data.views | hotNumber}} -->
          
        </view>
      </view>
      
    </view>
    
  </view>
</template>

<script>
  export default {
    name:"list-items",
    data() {
      return {
        
      };
    },
    props:{
      data:{
        type:Object,
        required:true
      },
      ranking:{
        type:Number,
        required:true
      }
    }
  }
</script>

<style lang="scss" scoped>
.line-clamp-2{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.containerBox{
  display: flex;
  justify-content: space-between;
  padding: 5px $uni-spacing-base;
  margin: 0 2px;
  margin-bottom: $uni-spacing-base;
  background-color:$uni-white;
  border-radius: 5px;
  box-shadow: 2px 2px 5px 1px rgba($color: #b9b9b9, $alpha: 0.2);

  .box-left{
    margin-right: 5px;

  }
  .box-right{
    .item-tile{
      font-size: $uni-font-size-lg;
      // line-height: $uni-font-size-lg;
      color: $uni-main-color;
      font-weight: 600;
    }
    .item-desc{
      font-size: $uni-font-size-base;
      // line-height: $uni-font-size-base;
      font-weight: 400;
      color: $uni-base-color;
    }
    .item-bottom{
      margin-top: 5px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .author {
        font-size: $uni-font-size-sm;
        // line-height: $uni-font-size-sm;
        color: $uni-secondary-color;
      }
      .hot-desc {
        image{
          width: 18px;
          height: 18px;
        }
        text{
          margin-left: 2px;
          font-size: $uni-font-size-sm;
          color:$uni-hot-color;
        }

      }


    }

  }

}

</style>